import styles from "./login.module.scss"
import TEXT_CONSTANTS from "@/constants"
import type { FormProps } from 'antd';
import { Button, Form, Input, message } from 'antd';
import { api } from "@/api/simulationApi";
import { useNavigate } from "react-router-dom";

const View = () => {
    const [form] = Form.useForm(); // 获取表单实例
    let navigateTo = useNavigate();
    type FieldType = {
        username?: string;
        password?: string;
        remember?: string;
    };
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        if(values.username === 'admin' && values.password === '123456'){
            api.getUsers().then((res: any) => {
                if(res.status === 'success'){
                    localStorage.setItem('token',res.data.token);
                    navigateTo('/page1');
                    message.success('登录成功！')
                }
            })
        }else{
            message.warning('用户名或密码错误！');
            form.resetFields();
        }
    };
    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        return errorInfo;
    };
    return (
        <>
            <div className={styles.lognBg}>
                <div className={styles.bgStyle}>
                    <h5 style={{
                        fontSize: '28px',
                        fontWeight: '600',
                        marginBottom: '30px',
                        color: '#fff',
                        textAlign: 'center'
                    }}>{TEXT_CONSTANTS.LOGIN_TITLE}</h5>
                    <Form
                        form={form}
                        name="basic"
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 24 }}
                        style={{ width: '20vw' }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item<FieldType>
                            className={styles.formItemCustomLabel}
                            label={TEXT_CONSTANTS.USER_NAME}
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item<FieldType>
                            className={styles.formItemCustomLabel}
                            label={TEXT_CONSTANTS.PASSWARD}
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            label={<span className={styles.hiddenLabel}> </span>}
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 20 }}
                            colon={false}
                        >
                            <Button style={{ width: '100%' }} type="primary" htmlType="submit">
                                {TEXT_CONSTANTS.LOGIN_BTN}
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </>
    )
}
export default View;